<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const yml = ref(0);
const ymurl = ref("");
const ymdex = ref(0);

import lms from '@/assets/images/moreImg.png'

const emit = defineEmits(['closeLarge'])

const ymlis = defineProps({
    msg: {
        type: Array,
        default: () => []
    }
})

const ymiv = (data, index) => {
    ymdex.value = index;
    ymurl.value = data;
}

const ymtotal = ref([]);
const total = ref([]);
let startIndex = 0; // 初始索引位置

const load = () => {
    if (startIndex < ymtotal.value.length) {
        const newItems = ymtotal.value.slice(startIndex, startIndex + 10);
        startIndex += 10;
        total.value = [...total.value, ...newItems];
    }
    else {
        ElMessage({
            message: '文件已经全部加载完毕',
            type: 'success',
        })
    }
}


onMounted(() => {
    startIndex = 10;
    ymtotal.value = ymlis.msg;
    total.value = ymtotal.value.slice(0, 10);
    ymdex.value = 0;
    ymurl.value = total.value[0];
    // yml.value = data.length * 135;
})
</script>

<template>
    <div class="d-lkb">
        <div class="d-lkb-c" @click.stop="emit('closeLarge', '')">
            <i class="icon iconfont icon-guanbi" style="font-size: .4rem;color: #fff;"></i>
        </div>
        <div class="d-lkb-x">
            <video v-if="$wlsf.filiv(ymurl) == 4" :src="ymurl" controls></video>
            <img v-else :src="ymurl" alt="">
        </div>
        <div class="d-lkb-u">
            <div class="app-p-i-b-csa">
                <ul class="app-p-i-b" style="height: 100px;" :style="{ width: total.length * 135 + 'px' }">
                    <li style="width: 130px;" v-for="(i, index) in total" :key="i.id"
                        :class="ymdex == index ? 'ibd' : 'ibds'" @click.stop="ymiv(i, index)">
                        <video v-if="$wlsf.filiv(i) == 4" :src="i"></video>
                        <img v-else :src="i" alt="">
                    </li>
                </ul>
            </div>
            <div class="loadMore" @click.stop="load">
                <img style="width: 56px;height: 60px;" :src="lms" alt="">
                <div style="text-align: center;color: #fff;">
                    <span>{{ total.length }}</span> / <span>{{ ymtotal.length }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.d-lkb {
    width: 100%;
    height: 100%;
    background-color: #393F4B;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 199;
}

.d-lkb-x {
    width: 100%;
    height: 80%;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.d-lkb-x img {
    max-width: 100%;
    max-height: 100%;
}

.d-lkb-x video {
    max-width: 100%;
    max-height: 100%;
}


.app-p-i-b {
    padding: 8px 0;
    height: 20%;
    overflow-y: hidden;
    overflow-x: auto;
}

.app-p-i-b li {
    float: left;
    height: 100%;
    margin-right: 5px;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}

.app-p-i-b img {
    width: 100%;
    height: 100%;
}

.app-p-i-b video {
    width: 100%;
    max-width: 100%;
}

.ibd {
    border: 2px solid var(--wls-color);
}

.ibds {
    border: 1px solid #DCDFE6;
}

.d-lkb-u {
    width: 100%;
    height: 1.3rem;
    display: flex;
    padding: 0 24px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.app-p-i-b-csa {
    width: calc(100% - 1.2rem);
    height: 100%;
    padding: 8px 0;
    overflow-y: hidden;
    overflow-x: auto;
}

.loadMore {
    width: 1rem;
    height: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 8px;
    margin-left: .16rem;
    border-radius: 8px;
    background-color: #387bff;
}
</style>